<template>
    <header>
      <div class="head">
          <div class="logo_name">豫医通——精细化医疗管理专家</div>
          <div class="right_content">
            <div class="hospital">
              <img :src="hospitalImg" alt="">
              <span class="hospitalName">某某某某第一附属医院</span>
            </div>
            <div class="Logout">
                <span class="sigOut">退出</span>
                <img :src="logOutImg" alt="">
            </div>
          </div>
      </div>
     
    </header>
</template>

<script>
export default {
  name: 'Head',
  data () {
    return {
      hospitalImg:require('@/assets/hospitalImg.png'),
      logOutImg:require('@/assets/logout.png')
    }
  }
}
</script>
<style lang="stylus"  scoped>
  Header{
    width:100%;
    height:.2604166666666667rem;
    background:#DDDDDD;
    .head{
      height:.2604166666666667rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      .logo_name{
        font-size:.0885416666666667rem;
        font-weight:600;
        text-indent:.046875rem; 
      }
      .right_content{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-right:.1302083333333333rem;
        .Logout{
          display:flex;
          align-items:center;
          justify-content:flex-start;
          margin-left:.2604166666666667rem;
          .sigOut{
            font-size:.0729166666666667rem;
            font-weight:400;
            margin-right:.0260416666666667rem;
          }
          img{
            width:16px;
            height:16px;
          }
        }
        .hospital{
            display:flex;
            align-items:center;
          .hospitalName{
            font-size:.0885416666666667rem;
            font-weight:600;
          }
          img{
            width:50px;
            height:50px;
          }
        
        }
      }
      
    }
  }
  
</style>
